<template>
  <div class="order-list-container">
    <div class="order-list-wrap">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <div class="order-list">
          <OrderCell v-for="(order) in orderList" :order="order" :key="order.id"></OrderCell>
          <EmptyFlag v-if="!loading && !orderList.length">订单是空的...</EmptyFlag>
          <van-loading style="margin-top: 10px;" v-if="loading" color="#0094ff" vertical>加载中...</van-loading>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import OrderCell from './components/OrderCell'
import EmptyFlag from '@/components/EmptyFlag'

export default {
  name: 'OrderList',
  components: {
    OrderCell,
    EmptyFlag
  },
  data () {
    return {
      loading: true,
      orderList: [],
      refreshing: false
    }
  },
  computed: {},
  created () {
    this.fetch()
  },
  methods: {
    fetch () {
      this.refreshing = true
      this.$api.get('/order/list.action', {
        params: {
          id: this.orderId
        }
      }).then((result) => {
        this.orderList = result
        this.refreshing = false
        this.loading = false
      }).catch((err) => {
        this.$toast(err.message)
        this.refreshing = false
        this.loading = false
      })
    },
    onRefresh () {
      this.fetch()
    }
  }
}
</script>

<style lang="less">
  @navHeight: 70px;

  .order-list-container {

    .order-list-wrap {
      padding-top: 10px;
      padding-bottom: @navHeight + 10px;
    }
  }
</style>
